<!--  -->
<template>
  <div class="fund_detail">
    <Nav title="资金明细">
      <template v-slot:left>
        <span class="back" @click=" $router.back()"></span>
      </template>
    </Nav>
    <div class="fund_detail_head flex flex-column justify-center">
      <div class="fund_detail_headnum">
        <span class="f-17">总收益(元)</span>
        <h2>{{total_income}}</h2>
      </div>
      <div class="fund_detail_headday f-14">今日收益金额：{{today_income}}元</div>
    </div>
    <TabCommon :tabs.sync="tabs" :tabIndex.sync="tabIndex" @tabChange="tabChange"></TabCommon>
    <div class="order-list-wrapper">
      <Scroll
        :preventDefault="true"
        :click="false"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="capitalList"
        ref="myScroll"
      >
        <div>
          <template v-for="(item,index) in capitalList">
            <div class="fund_detail_item flex justify-between aligin-center" :key="index">
              <div class="fund_detail_itemleft flex">
                <img :src="icon(item.from_type)" alt="">
                <div class="fund_detail_itemleft_con flex flex-column">
                  <span class="f-14">{{item.text}}</span>
                  <span class="f-12 color-gray mt-8">{{item.create_time}}</span>
                </div>
              </div>
              <div class="fund_detail_itemright f-15">{{item.sign==0?'-':'+'}}{{item.number}}</div>
            </div>
            <!-- <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
            <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>-->
          </template>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import TabCommon from "../../components/OrderTab";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import { userAccounts } from "../../api/api";
import Out from "../../assets/imgs/consumption.png";
import Get from "../../assets/imgs/balance_withdrawal.png";
import Money from "../../assets/imgs/distribution.png";
import Share from "../../assets/imgs/share_reward.png";

export default {
  mixins: [Page],
  components: { Nav, TabCommon, Scroll },
  data() {
    return {
      capitalList: [], //资金明细列表
      tabs: ["全部", "提现", "消费", "充值"],
      tabIndex: 0,
      total_income: "",
      today_income: ""
    };
  },
  computed: {
    c_type() {
      switch (this.tabIndex) {
        case 0:
          return 10;
        case 1:
          return 8;
        case 2:
          return 1;
        case 3:
          return 4;
      }
    }
  },
  watch: {},
  methods: {
    icon(type) {
      switch (type) {
        case 1:
          return Out;
        case 4:
          return Money;
        case 6:
          return Share;
        case 8:
          return Get;
        default:
          return Money;
      }
    },
    _api() {
      userAccounts({
        page: this.current_page + 1,
        type: this.c_type
      }).then(({ data: { result } }) => {
        this.total_income = result.total_income;
        this.today_income = result.today_income;
        if (result.list && result.list.length != 0) {
          this.capitalList = [...this.capitalList, ...result.list];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    },
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index;
        //重置
        this.current_page = 0;
        this.last_page = 1;
        this.loading = false;
        this.capitalList = [];
        this._api();
      }
    }
  },
  created() {},
  mounted() {
    this._api();
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.color-yellow {
  color: #e4ac02;
}
.color-green {
  color: #188a10;
}
.fund_detail {
  height: 100%;
}
.fund_detail_head {
  background: url("../../assets/imgs/funddetail@3x.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 200px;
  color: #fff;
  padding-left: 44px;
  box-sizing: border-box;
}
.fund_detail_headnum h2 {
  font-size: 30px;
  padding-top: 10px;
}
.fund_detail_headday {
  padding: 26px 0 10px;
}
.fund_detail_item {
  height: 79px;
  border-bottom: 1px solid #eaeaea;
  margin: 0 16px;
}
.fund_detail_itemleft > img {
  width: 24px;
  height: 24px;
  padding-right: 10px;
}
.order-list-wrapper {
  height: calc(100% - 289px);
  overflow: hidden;
}
</style>